import * as PIXI from 'pixi.js'

export interface ViewerOptions {
  width?: number
  height?: number
}

export default class {
  declare width: number
  declare height: number
  declare app: PIXI.Application
  declare dom: HTMLElement
  constructor(dom: HTMLElement, options?: ViewerOptions) {
    this.dom = dom
    this.width = dom.clientWidth
    this.height = dom.clientHeight
    this.app = new PIXI.Application()
  }
  async init() {
    await this.app.init({
      width: this.width,
      height: this.height,
      background: 0xffffff,
      resizeTo: this.dom
    })
    this.dom.appendChild(this.app.canvas)
    this.test()
  }
  destroy() {
    this.app?.destroy()
  }
  async test() {
    await PIXI.Assets.load('/images/1.jpg')

    const texture = PIXI.Texture.from('/images/1.jpg')

    const sprite = new PIXI.Sprite(texture)
    sprite.width = 600
    sprite.height = 400
    sprite.x = 100
    sprite.y = 100
    this.app.stage.addChild(sprite)
  }
}